<template>
	<view class="scroll " ref="wrapper" id="wrapper" :style="{height: height? height + 'px': '500px'}">

		<view class="flex margin-top-xs">
			<view class="flex-twice margin-xs margin-lr bus-wrapper">
				<view class="carHead">
					车头
				</view>
				<view id="body" ref="busBody" class="body" v-for="(carriage,caIndex) in seatArray">
					<view id="seat-warpper" class="margin-top-sm">
						<view v-for="(row, rIndex) in carriage" :key="rIndex" :id="rIndex" class="flex justify-center">
							<block v-for="(col, cIndex) in row" :key="cIndex">
								<view v-if="cIndex==2" class="flex justify-center" :style="{width: (100 / (row.length+1)) + '%',height: (100 / (row.length+1)) + '%'}">
								</view>
								<view class="flex justify-center" :style="{width: (100 / (row.length+1)) + '%',height: (100 / (row.length+1)) + '%'}">
									<view class="" @click="handleChooseSeat(caIndex,rIndex,cIndex)" v-if="col !== 2" style="width: 80%; height: 80%; text-align: center">
										<image style="width: 100%;" mode="widthFix" :src="seats[col].image"></image>
									</view>
								</view>
							</block>
						</view>
					</view>
				</view>
			</view>
			<!--座位描述导航-->
			<view class="flex-sub margin-xs margin-lr margin-top-sm" id="seatNav">
				<view>
					<view v-for="(value, key) in seats" :key="key">
						<view class="flex align-center margin-top-xs">
							<image style="max-width: 25px; min-width: 20px" mode="widthFix" :src="value.image"></image>
							<view class="padding-lr-xs text-gray text-sm">{{value.category}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			height: String,
			speedSeat: Array
		},
		data() {
			return {
				map: [],
				seatArray: [],
				pollNum: 0,
				seats: {
					'1': {
						image: '../static/img/seatgreen.png',
						category: '已选'
					},
					'0': {
						image: '../static/img/seatgrey.png',
						category: '普通座'
					}
				}
			}
		},
		mounted() {
			this.map = JSON.parse(JSON.stringify(this.speedSeat))
			this.seatArray = JSON.parse(JSON.stringify(this.map))
		},
		methods: {
			handleChooseSeat: function(cIndex, row, col) {
				let seatArray = this.seatArray
				let seatValue = seatArray[cIndex][row][col]
				let type = 'add'
				if (this.map[cIndex][row][col] == '1') {
					return;
				}
				if (seatValue == '1') {
					seatArray[cIndex][row][col] = 0
					this.pollNum--
					type = 'dev'
				} else {
					seatArray[cIndex][row][col] = 1
					this.pollNum++
					type = 'add'
				}
				this.seatArray = new Array(...seatArray)
				this.$emit('handleChooseSeat', {
					speedSeat: this.seatArray,
					pollNum: this.pollNum,
					type: type,
					seat: [cIndex, row, col]
				})
			}
		}
	}
</script>

<style scoped>
	.scroll {
		overflow-y: auto;
		/*position: absolute;*/
		width: 100%;
	}

	.bus-wrapper {
		border: 1px dotted #c5c5c5;
		overflow: hidden;
		border-radius: 30px 30px 10px 10px;
	}

	.carHead {
		/*margin: 0 auto;*/
		min-height: 30px;
		width: 100%;
		background-color: #e3e3e3;
		/*border-radius: 0 0 30px 30px;*/
		color: #585858;
		text-align: center;
	}

	.body {
		/* min-height: 70vh; */
		border-bottom: 1px dotted #c5c5c5;
		padding: 30upx 10upx;
	}
</style>
